<template>
  <div class="ec-container">
    <div class="title">{{infoTitle}}
      <el-tooltip v-if="infoTips" effect="dark" :content="infoTips" placement="top">
        <i class="wukong wukong-help_tips"></i>>
      </el-tooltip>
    </div>
    <div class="option-bar">
      <div v-if="selectionList.length == 0">
        <el-select v-model="optionsType" @change="refreshList" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="isSubType" @change="refreshList" style="width: 120px; margin-left: 10px;" placeholder="请选择">
          <el-option v-for="item in [{name: '我的', value: 0}, {name: '我下属的', value: 1}]" :key="item.value"
            :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <div v-if="showFilterView" class="filtrate-button" @click="getFilterFieldInfo">
          <img class="filtrate-button-img" src="@/assets/img/c_filtrate.png" />
          <span class="filtrate-button-title">高级筛选</span>
        </div>
        <filter-form :fieldList="filterFieldList" :dialogVisible.sync="showFilter" :obj="filterObj" :crmType="crmType"
          :isSeas="true" @filter="handleFilter">
        </filter-form>
      </div>
      <flexbox v-else class="selection-bar">
        <div class="selected—title">已选中<span class="selected—count">{{selectionList.length}}</span>项</div>
        <flexbox class="selection-items-box">
          <flexbox class="selection-item" v-for="(item, index) in selectionButtonList" :key="index"
            @click.native="selectionBarClick(item.type)">
            <img class="selection-item-icon" :src="item.icon" />
            <div class="selection-item-name">{{item.name}}</div>
          </flexbox>
        </flexbox>
      </flexbox>
    </div>
    <filter-content v-if="filterObj.form && filterObj.form.length > 0" :obj="filterObj" @delete="handleDeleteField">
    </filter-content>
    <el-table class="n-table--border" id="crm-table" v-loading="loading" :data="list" :height="tableHeight" stripe
      border highlight-current-row style="width: 100%" :cell-style="cellStyle" @row-click="handleRowClick"
      @selection-change="handleSelectionChange">
      <el-table-column v-if="showSelection" show-overflow-tooltip type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column v-for="(item, index) in fieldList" :key="index" show-overflow-tooltip :prop="item.prop"
        :label="item.label" :width="item.width" :formatter="fieldFormatter">
      </el-table-column>
      <el-table-column :resizable="false">
      </el-table-column>
      <el-table-column v-if="showCheckStatus" show-overflow-tooltip prop="check_status_info" label="状态"
        :resizable="false" width="100" align="center" fixed="right">
        <template slot="header" slot-scope="scope">
          <div class="table-head-name">{{scope.column.label}}</div>
        </template>
        <template slot-scope="scope">
          <div class="status_button" :style="getStatusStyle(scope.row.check_status)">
            {{scope.row.check_status_info}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="p-contianer">
      <el-pagination class="p-bar" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="pageSizes" :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 相关详情页面 -->
    <c-r-m-all-detail :visible.sync="showDview" :crmType="rowType" :id="rowID">
    </c-r-m-all-detail>
  </div>
</template>

<script>
  import {
    filterIndexfields
  } from '@/api/customermanagement/common'
  import {
    crmLeadsSetFollowAPI
  } from '@/api/customermanagement/clue'
  import {
    crmCustomerSetFollowAPI
  } from '@/api/customermanagement/customer'
  import message_table from '../mixins/message_table'
  import filterForm from '@/views/customermanagement/components/filterForm'
  import filterContent from '@/views/customermanagement/components/filterForm/filterContent'
  import CRMAllDetail from '@/views/customermanagement/components/CRMAllDetail'

  export default {
    /** 客户管理 的待审核系统 */
    name: 'c-r-m-message',

    components: {
      filterForm,
      filterContent,
      CRMAllDetail
    },

    mixins: [message_table],

    watch: {
      show() {
        this.initTableHead()
      }
    },

    props: {
      // crm类型
      crmType: {
        type: String,
        default: ''
      },
      // crm某个类型下的类型数据
      infoType: {
        type: String,
        default: ''
      },

      infoTitle: {
        type: String,
        default: ''
      },

      infoTips: {
        type: String,
        default: ''
      },

      // 展示的时候 才发请求
      show: Boolean
    },

    data() {
      return {
        optionsType: 0,
        isSubType: 0, // 是否是下属
        /** 高级筛选 */
        showFilter: false, // 控制筛选框
        filterFieldList: [],
        filterObj: {
          form: []
        }, // 筛选确定数据
        /** 勾选数据操作 */
        selectionList: [], // 勾选的数据
        selectionButtonList: [{
          name: '已跟进',
          type: 'follow',
          icon: require('@/assets/img/selection_alloc.png')
        }], // 操作按钮列表
        /** 控制详情展示 */
        rowID: '', // 行信息
        rowType: '', //详情类型
        showDview: false
      }
    },

    computed: {
      // 展示勾选框
      showSelection() {
        if (this.infoType == 'followLeads' || this.infoType == 'followCustomer') {
          return true
        }

        return false
      },

      // 展示筛选
      showFilterView() {
        if (this.crmType == 'receivables_plan') {
          return false
        }
        return true
      },

      // 展示审核状态
      showCheckStatus() {
        if (this.crmType == 'contract' || this.crmType == 'receivables') {
          return true
        }
        return false
      },

      // 下拉数据
      options() {
        if (this.infoType == 'todayCustomer') {
          return [{
              name: '今日需联系',
              value: 1
            },
            {
              name: '已逾期',
              value: 2
            },
            {
              name: '已联系',
              value: 3
            }
          ]
        } else if (
          this.infoType == 'followLeads' ||
          this.infoType == 'followCustomer'
        ) {
          return [{
            name: '待跟进',
            value: 1
          }, {
            name: '已跟进',
            value: 2
          }]
        } else if (
          this.infoType == 'checkContract' ||
          this.infoType == 'checkReceivables'
        ) {
          return [{
            name: '待审核',
            value: 1
          }, {
            name: '已审核',
            value: 2
          }]
        } else if (this.infoType == 'remindReceivablesPlan') {
          return [{
              name: '待回款',
              value: 1
            },
            {
              name: '已回款',
              value: 2
            },
            {
              name: '已逾期',
              value: 3
            }
          ]
        } else if (this.infoType == 'endContract') {
          return [{
            name: '即将到期',
            value: 1
          }, {
            name: '已到期',
            value: 2
          }]
        }

        return []
      }
    },

    mounted() {
      if (this.options.length > 0) {
        this.optionsType = this.options[0].value
      }

      this.initTableHead()
    },

    methods: {
      /**
       * 初始化表头数据
       */
      initTableHead() {
        if (this.show && this.fieldList.length == 0) {
          this.getFieldList()
        }
      },

      /**
       * 刷新列表
       */
      refreshList() {
        this.currentPage = 1
        if (this.fieldList.length > 0) {
          this.getList()
        } else {
          this.getFieldList()
        }
      },

      /**
       * 勾选数据
       */
      handleSelectionChange(val) {
        this.selectionList = val // 勾选的行
      },

      /**
       * 勾选后的操作
       */
      selectionBarClick(type) {
        if (type == 'follow') {
          this.$confirm('您确定此操作吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              let request = {
                followLeads: crmLeadsSetFollowAPI,
                followCustomer: crmCustomerSetFollowAPI
              } [this.infoType]
              request({
                  id: this.selectionList.map(item => {
                    return item[this.crmType + '_id']
                  })
                })
                .then(res => {
                  this.$message.success(res.data)
                  this.refreshList()

                  this.$emit('on-handle', {
                    type: 'follow',
                    value: this.selectionList.length,
                    infoType: this.infoType
                  })
                })
                .catch(() => {})
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              })
            })
        }
      },

      /**
       * 获取高级筛选字段数据后展示
       */
      getFilterFieldInfo() {
        filterIndexfields({
            types: 'crm_' + this.crmType
          })
          .then(res => {
            this.filterFieldList = res.data
            this.showFilter = true
          })
          .catch(() => {})
      },

      /**
       * 选择筛选字段
       */
      handleFilter(form) {
        this.filterObj = form
        this.showFilter = false
        this.updateTableHeight()
        this.refreshList()
      },

      /**
       * 删除筛选字段
       */
      handleDeleteField(data) {
        this.filterObj = data.obj.obj
        this.updateTableHeight()
        this.refreshList()
      },

      /**
       * 表单元可点击样式
       */
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (
          column.property === 'name' ||
          column.property === 'number' ||
          column.property === 'customer_id' ||
          column.property === 'contract_id' ||
          column.property === 'business_id'
        ) {
          return {
            color: '#3E84E9',
            cursor: 'pointer'
          }
        } else {
          return ''
        }
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/table.scss';

  /** 场景和筛选 */
  .filtrate-button {
    cursor: pointer;
    margin-left: 10px;
    display: inline-block;

    &-img {
      vertical-align: middle;
      margin: 0 5px;
      width: 12px;
    }
  }

  .filtrate-button:hover {
    color: $xr-color-primary;
  }

  .ec-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .title {
    padding: 0 20px;
    font-size: 16px;
    line-height: 60px;
    height: 60px;

    i {
      cursor: pointer;
      margin-left: 5px;
      color: #dcdfe6;
    }

    i:hover {
      color: $xr-color-primary;
    }
  }

  .option-bar {
    padding: 5px 20px;
  }

  /** 勾选操作 */
  .selection-bar {
    font-size: 12px;
    height: 34px;
    color: #777;

    .selected—title {
      flex-shrink: 0;
      padding-right: 20px;
      border-right: 1px solid $--table-border-color;

      .selected—count {
        color: $xr-color-primary;
      }
    }
  }

  .selection-items-box {
    .selection-item {
      width: auto;
      padding: 15px;

      .selection-item-icon {
        display: block;
        margin-right: 5px;
        width: 15px;
        height: 15px;
      }

      .selection-item-name {
        cursor: pointer;
        color: #777;
      }

      .selection-item-name:hover {
        color: $xr-color-primary;
      }
    }
  }

</style>
